window.onload = function () {
  let registerUsername = document.getElementById("registerUsername");
  let registerPassword = document.getElementById("registerPassword");
  let registerPassword2 = document.getElementById("registerPassword2");
  let registerPhone = document.getElementById("registerPhone");
  let registerName = document.getElementById("registerName");
  let usernameFB = document.getElementById("usernameFB");
  let passwordFB = document.getElementById("passwordFB");
  let password2FB = document.getElementById("password2FB");
  let pwd_strength = document.getElementById("pwd_strength");
  let nameFB = document.getElementById("nameFB");
  let phoneFB = document.getElementById("phoneFB");


  //获取所有的input标签，统一设置
  let inputs = document.getElementsByTagName("input");
  //input焦点事件响应时框内文字 飞出缩小的效果函数
  function inputFocus(inputName) {
    let label = inputName.parentElement.firstElementChild;
    label.style.color = "#399AF2";
    label.style.transform = "scale(.86,.86) translateY(-34px)";
  }

  //判断焦点事件消失时判断的函数
  function inputBlur(inputName) {
    let label = inputName.parentElement.firstElementChild;
    label.style.color = "";

    if (inputName.value) {
      //框内有文字则保持效果
      label.style.transform = "scale(.86,.86) translateY(-34px)";
    } else {
      //框内为空时则回复原本状态
      label.style.transform = "";
    }
  }

  // 给每个input都分别绑定focus和blur响应事件
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("focus", function () {
      inputFocus(this);
    });

    inputs[i].addEventListener("blur", function () {
      inputBlur(this);
    });
  }

  //用户名的正则只可包含字母，数字，下划线和短连接号-
  registerUsername.onkeyup = function () {
    let uPattern = /[^A-za-z0-9_-]/;
    let letter1st = /^[a-z]/i;
    if (!registerUsername.value) {
      usernameFB.innerText = "用户名不能为空！";
    } else if (uPattern.test(registerUsername.value)) {
      usernameFB.innerText =
        "请输入正确的用户名\n只可包含字母，数字，下划线和短连接号";
    } else if (!letter1st.test(registerUsername.value)) {
      usernameFB.innerText = "请输入正确的用户名\n必须以字母开头";
    } else if (
      registerUsername.value.length > 11 ||
      registerUsername.value.length < 4
    ) {
      usernameFB.innerText = "用户名长度应为4-11位！";
    } else {
      usernameFB.innerText = "";
    }
  };

  //密码的正则，包含大小写英文、数字、特殊符号
  registerPassword.onkeyup = function () {

    //基础正则
    let pPattern = /[^A-za-z0-9~!@#$%^&*]/;

    //大写字母
    let majuscule = /[A-Z]/;

    //小写字母
    let lowercase = /[a-z]/;

    //英文字母
    let hasNumber = /[0-9]/;

    //特殊符号
    let specials = /[~!@#$%^&*]/;
    passwordFB.style.color = "";
    if (!registerPassword.value) {
      passwordFB.innerText = "密码不能为空！";
      pwd_strength.style.width = "0";
    } else if (pPattern.test(registerPassword.value)) {
      passwordFB.innerText =
        "请输入正确的密码\n只能包含大小写英文、数字和特殊符号";
      pwd_strength.style.width = "0";
    } else if (
      registerPassword.value.length > 11 ||
      registerPassword.value.length < 6
    ) {
      passwordFB.innerText = "密码长度应为6-11位！";
      pwd_strength.style.width = "0";
    } else {
      passwordFB.innerText = "";

      //判断密码强度
      let strength = 0;

      //累次判断正则，条件累次添加密码强度
      if (majuscule.test(registerPassword.value)) strength++;
      if (lowercase.test(registerPassword.value)) strength++;
      if (hasNumber.test(registerPassword.value)) strength++;
      if (specials.test(registerPassword.value)) strength++;

      //根据密码强度设置“密码强度”小边框的动画
      switch (strength) {
        case 1:
          {
            passwordFB.innerText = "密码强度：低";
            pwd_strength.style.width = "60px";
            pwd_strength.style.backgroundColor = "#ff0000";
          }
          break;
        case 2:
          {
            passwordFB.style.color = "#FFA500";
            passwordFB.innerText = "密码强度：中";
            pwd_strength.style.width = "120px";
            pwd_strength.style.backgroundColor = "#FF7F50";
          }
          break;
        case 3:
          {
            passwordFB.style.color = "#FFA500";
            passwordFB.innerText = "密码强度：高";
            pwd_strength.style.width = "180px";
            pwd_strength.style.backgroundColor = "#ffff00";
          }
          break;
        case 4:
          {
            passwordFB.style.color = "#008000";
            passwordFB.innerText = "密码强度：极高";
            pwd_strength.style.width = "240px";
            pwd_strength.style.backgroundColor = "#008000";
          }
          break;
      }
    }
  };


  //再次输入密码验证两次输入是否一致
  registerPassword2.addEventListener("blur", function () {
    if (registerPassword.value != registerPassword2.value) {
      password2FB.innerText = "两次输入的密码不一致！";
    } else {
      password2FB.innerText = "";
    }
  });

  //判断姓名的正则表达式
  registerName.addEventListener("keyup", function () {
    let nPattern = /^[A-z ]+$|^[\u4E00-\u9FA5·]+$/;
    if (nPattern.test(registerName.value)) {
      nameFB.innerText = "";
    } else {
      nameFB.innerText = "只能输入纯中文或纯英文";
    }
  });

  //判断电话号码正则
  registerPhone.addEventListener("keyup",function(){
    //11位全数字正则
    let phPattern = /^[0-9]{11}$/;
    if(phPattern.test(registerPhone.value)){
      phoneFB.innerText = "";
    }else{
      phoneFB.innerText = "请输入正确的电话号码";
    }
  })
};
